<template>
	<view class="content">
		<view class="title display-flex center align-items">
			<view class="display-flex align-items" style="margin-left: -200rpx;margin-top: -100rpx;">
				<image :src="info.avatar" style="width: 120rpx;height: 120rpx;" class="border-radius" mode="">
				</image>
				<view class="margin-left-20 color-FFF">
					<view class="font-size-30 font-weight-bold">
						{{info.nickname_text}}
					</view>
					<view class="font-size-24">
						{{info.mobile}}
					</view>
					<view class="font-size-24">
						{{info.city_address || '---'}}
					</view>
				</view>
			</view>
		</view>
		<view class="padding-about-30">
			<view class="view display-flex space-between align-items" style="margin-top: -100rpx;">
				<view class="" style="width: 49%;">
					<view class="font-size-24 display-flex center align-items flex-direction-column">
						<view class="">
							当前总库存
						</view>
						<view class="">
							{{info?.show_card_count?.team_card_all}}
						</view>
						<view class="font-size-24 margin-top-30" style="color: #2671CE;">
							包含隶属下级
						</view>
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 120rpx;background: #333333;"></view>
				<view class="" style="width: 49%;">
					<view class="font-size-24 display-flex center align-items flex-direction-column">
						<view class="">
							本网点库存
						</view>
						<view class="">
							{{info?.show_card_count?.card_all}}
						</view>
						<view class="font-size-24 margin-top-30" style="color: #2671CE;">
							可开卡分配库存
						</view>
					</view>
				</view>
			</view>
			<view class="view display-flex space-between align-items" style="margin-top: 0rpx; border-top: #333333 solid 1rpx; border-radius: 0;">
				<view class="" style="width: 33%;">
					<view class="font-size-24 display-flex center align-items flex-direction-column">
						<view class="">
							总开卡
						</view>
						<view class="">
							{{open_data.all_open??'0'}}
						</view>
						<view class="font-size-24 margin-top-30" style="color: #2671CE;">
							包含隶属下级
						</view>
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 120rpx;background: #333333;"></view>
				<view class="" style="width: 33%;">
					<view class="font-size-24 display-flex center align-items flex-direction-column">
						<view class="">
							网点开卡
						</view>
						<view class="">
							{{open_data.all_2_open??'0'}}
						</view>
						<view class="font-size-24 margin-top-30" style="color: #2671CE;">
							不包含推广员
						</view>
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 120rpx;background: #333333;"></view>
				<view class="" style="width: 33%;">
					<view class="font-size-24 display-flex center align-items flex-direction-column">
						<view class="">
							推荐员开卡
						</view>
						<view class="">
							{{open_data.all_3_open??'0'}}
						</view>
						<view class="font-size-24 margin-top-30" style="color: #2671CE;">
							隶属下级推广员
						</view>
					</view>
				</view>
			</view>
			<view class="view margin-top-20">
				<view class="space-between display-flex">
					<view class="display-flex align-items">
						<view style="width: 4rpx;height: 28rpx;background: #2671CE;">
						</view>
						<view class="font-size-30 margin-left-20 font-weight-bold" >
							开卡统计
						</view>
					</view>
					<view class="display-flex">
						<view @click="datetimePicker.open()" class="">
							<view class="font-size-22">
								开始
							</view>
							<view class="time margin-top-10 display-flex align-items space-between" style="height: 0.3rem;">
								<view class="file-1  font-size-22 ">
									{{date}}
								</view>
								<view class="margin-left-10">
									<uv-icon name="arrow-down-fill" color="#2671CE" size="12"></uv-icon>
								</view>
							</view>
						</view>

						<view @click="enddatetimePicker.open()" class="margin-left-30">
							<view class="font-size-22">
								结束
							</view>
							<view class="time margin-top-10 display-flex align-items space-between" style="height: 0.3rem;">
								<view class="file-1  font-size-22 ">
									{{edndate}}
								</view>
								<view class="margin-left-10">
									<uv-icon name="arrow-down-fill" color="#2671CE" size="12"></uv-icon>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="">
					<view v-for="item,index in list" :key="index"
						class="viewitem margin-top-20 display-flex space-between align-items" style="border-bottom: #333333 solid 1rpx; border-radius: 0;">
						<view class="">
							{{item.show_date}}
						</view>
						<view class="">
							{{item.nums}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<div class="kong"></div>
		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" :maxDate="Date.now()" @confirm="confirm">
		</uv-datetime-picker>
		<uv-datetime-picker ref="enddatetimePicker" v-model="end_value" mode="date" :maxDate="Date.now()"
			@confirm="ednconfirm">
		</uv-datetime-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const actions = [{
			text: '选项一'
		},
		{
			text: '选项二'
		},
		{
			text: '选项三'
		},
	];
	const value=ref(timestampToDate(Date.now(), 'Y/m/d'))
	const end_value=ref(timestampToDate(Date.now(), 'Y/m/d'))
	const date = ref(timestampToDate(Date.now(), 'Y/m/d'))
	const edndate = ref(timestampToDate(Date.now(), 'Y/m/d'))
	const datetimePicker = ref(null)
	const enddatetimePicker = ref(null)
	const info = ref({})
	const open_data = ref({})
	const list = ref([])
	const id = ref('')
	onLoad(function(option) {
		id.value = option.id
		son_msg(option.id)
		son_open(option.id)
	});
	onShow(function() {});

	function confirm(event) {
		console.log(event);
		date.value = timestampToDate(event.value, 'Y/m/d')
		
		son_open()
	}

	function ednconfirm(event) {
		
		edndate.value = timestampToDate(event.value, 'Y/m/d')
		son_open()
	}
	async function son_open() {
		console.log(date.value,edndate.value);
		const {
			code,
			data
		} = await api.son_open({
			begin_time:date.value,
			end_time:edndate.value,
			id:id.value
			
		})
		if (code == 1) {
			list.value = data.list
			open_data.value=data.open_data
		}
	}
	async function son_msg(id) {
		const {
			code,
			data
		} = await api.son_msg({
			id
		})
		if (code == 1) {
			info.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.viewitem {
		padding: 30rpx 52rpx;
		background: #F8F8F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.title {
		width: 750rpx;
		height: 345rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
		overflow: hidden;
		background: url('');
		// background: #2671CE;
		// border-radius: 50%;
	}

	.time {
		width: 150rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #C3DAFC;
	}

	.view {
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 12rpx;
	}
</style>